<template>
	<view class="distribution_container">
		<view class="distribution_title_box">
			<view class="distribution_title_img">
				<image :src="titleImg" mode="widthFix" class="distribution_img"></image>
			</view>
			<view class="distribution_title">基本功能</view>
		</view>

		<view class="distribution_box">
			<!-- 1 -->
			<view class="bottom_box" v-for="items in bottomList" :key="items.id" @click="handlerBottom(items)">
				<!-- 左 -->
				<view class="bottom_title_box">
					<view class="bottom_title">
						{{ items.title }}
					</view>
					<view class="bottom_btn">
						{{ items.tip }}
					</view>
				</view>
				<view class="bottom_img_box">
					<image :src="items.img" mode="" class="bottom_img"></image>
				</view>
			</view>
		</view>

		<!-- 分销员招募 -->
		<u-popup v-model="showDistributors" mode="center" border-radius="12" :closeable="true" close-icon-color="#000">
			<view class="popup_distributor_box">
				<image :src="shareImg" mode="" class="popup_distributor_img"></image>
			</view>
			<view class="distributor_btn_box">
				<view class="distributor_btn_all" v-for="(item, index) in distributorBtnList" :key="index" @click="handleShare(item)">
					<view class="btn_img_box">
						<image :src="item.img" mode="" class="btn_img"></image>
					</view>
					<view class="btn_name">
						{{ item.name }}
					</view>
				</view>
			</view>
		</u-popup>

		<!-- 客服弹窗 -->
		<u-popup v-model="showCustom" mode="center" border-radius="12" :closeable="true" close-icon-color="#000">
			<view class="popup_custom_box">
				<image :src="customObj" mode="widthFix" class="popup_custom_img" :show-menu-by-longpress="true"></image>
			</view>
		</u-popup>

		<!-- 查看上级联系方式弹窗 -->
		<u-popup v-model="showPhoneNum" mode="center" border-radius="12">
			<view class="popup_phone_box">
				<view class="popup_wx_code">
					<image :src="userMsgObj.contact_qrcode" mode="widthFix" class="popup_wx_img" :show-menu-by-longpress="true"></image>
				</view>
				<view class="" style="display: flex; align-items: center; justify-content: space-between; padding: 30rpx 20rpx 0 0">
					<view class="popup_phone_num">联系方式：{{ userMsgObj.contact_number }}</view>
					<view class="">
						<u-button type="primary" size="mini" @click="handleCall(userMsgObj.contact_number)">拨打</u-button>
					</view>
				</view>
			</view>
		</u-popup>

		<!-- 关注公众号弹窗 -->
		<u-popup v-model="showOfficialAccount" mode="center" width="680" border-radius="12">
			<view class="popup_official_box">
				<image :src="officialAccountImg" mode="widthFix" :show-menu-by-longpress="true"></image>
			</view>
			<view class="popup_official_title">请先关注公众号</view>
		</u-popup>

		<!-- 登出提示 -->
		<u-modal v-model="showOut" :content="outContent" :show-cancel-button="true" @confirm="sureLoginOut"></u-modal>
	</view>
</template>

<script>
export default {
	props: ['userInfo', 'isSubscribe', 'isShowLive', 'userIsAgent'],
	data() {
		return {
			titleImg: 'https://file-1314054542.cos.ap-shanghai.myqcloud.com/cos_file/wechat_xcx/6683708371466_1719890051.png',
			bottomList: [
				{
					id: '0',
					title: '我的分销',
					tip: '查看我的分销',
					img: 'https://file-1314054542.cos.ap-shanghai.myqcloud.com/cos_file/wechat_xcx/66ed20a6ee11c_1726816422.png'
				},
				{
					id: '1',
					title: '分销员招募',
					tip: '招募我的分销员',
					img: 'https://file-1314054542.cos.ap-shanghai.myqcloud.com/cos_file/wechat_xcx/66ed1fdf46ae6_1726816223.png'
				},
				// {
				// 	id: '1',
				// 	title: '我的用户',
				// 	tip: '我邀请的用户',
				// 	img: '/static/my/img-my-user.png'
				// },
				{
					id: '2',
					title: '我的小店',
					tip: '自己的小店信息',
					img: 'https://file-1314054542.cos.ap-shanghai.myqcloud.com/cos_file/wechat_xcx/66ed202b317c9_1726816299.png'
				},
				{
					id: '3',
					title: '联系客服',
					tip: '为您答疑解惑',
					img: 'https://file-1314054542.cos.ap-shanghai.myqcloud.com/cos_file/wechat_xcx/66ed20795848d_1726816377.png'
				},
				// {
				// 	id: '4',
				// 	title: '商务合作',
				// 	tip: '查看商务合作',
				// 	img: 'https://file-1314054542.cos.ap-shanghai.myqcloud.com/cos_file/wechat_xcx/66837001d9744_1719889921.png'
				// },
				{
					id: '5',
					title: '设置',
					tip: '查看设置',
					img: 'https://file-1314054542.cos.ap-shanghai.myqcloud.com/cos_file/wechat_xcx/66ed1ffe9300f_1726816254.png'
				},
				{
					id: '6',
					title: '登出账号',
					tip: '登出当前账号',
					img: 'https://file-1314054542.cos.ap-shanghai.myqcloud.com/cos_file/wechat_xcx/66ed20e07f285_1726816480.png'
				},
				{
					id: '10',
					title: '设备订单',
					tip: '查看设备订单',
					img: 'https://file-1314054542.cos.ap-shanghai.myqcloud.com/cos_file/wechat_xcx/66f269d8de29b_1727162840.png'
				},
				{
					id: '13',
					title: '宽带订单',
					tip: '查看宽带订单',
					img: 'https://file-1314054542.cos.ap-shanghai.myqcloud.com/cos_file/wechat_xcx/66f7a19e2eb98_1727504798.png'
				}
			],
			showOut: false,
			outContent: '是否确定登出当前账号',
			showDistributors: false,
			distributorBtnList: [
				{
					name: '保存本地',
					img: '/static/home/icon-save.png'
				}
			],
			shareImg: 'https://saler.jkcae.com/poster/package_poster/poster_package_7_270_12168.png',
			showCustom: false,
			customObj: {},
			userInfoObjNew: {},
			showPhoneNum: false,
			userMsgObj: {},
			isSubscribeNew: '',
			officialAccountImg: 'https://file-1314054542.cos.ap-shanghai.myqcloud.com/cos_file/lunbo_image/660ccdfd97e61_1712115197.jpg',
			showOfficialAccount: false,
			isShowLiveNew: '',
			userIsAgentNew: ''
		};
	},
	watch: {
		isShowLive: {
			handler(newVal) {
				this.isShowLiveNew = newVal;
			},
			immediate: true
		},

		userInfo: {
			handler(newVal) {
				this.userInfoObjNew = newVal;
				this.getBottomList();
			},
			deep: true,
			immediate: true
		},

		isSubscribe: {
			handler(newVal) {
				this.isSubscribeNew = newVal;
			},
			immediate: true
		},

		userIsAgent: {
			handler(newVal) {
				this.userIsAgentNew = newVal;
			},
			immediate: true
		}
	},
	onShow() {},
	methods: {
		// 拨打电话
		handleCall(val) {
			uni.makePhoneCall({
				phoneNumber: val
			});
		},

		getBottomList() {
			const that = this;
			if (this.userInfoObjNew.level == '1') {
				that.bottomList = [
					{
						id: '0',
						title: '我的分销',
						tip: '查看我的分销',
						img: 'https://file-1314054542.cos.ap-shanghai.myqcloud.com/cos_file/wechat_xcx/66ed20a6ee11c_1726816422.png'
					},
					{
						id: '1',
						title: '分销员招募',
						tip: '招募我的分销员',
						img: 'https://file-1314054542.cos.ap-shanghai.myqcloud.com/cos_file/wechat_xcx/66ed1fdf46ae6_1726816223.png'
					},
					{
						id: '11',
						title: '电商带货',
						tip: '申请电商带货',
						img: 'https://file-1314054542.cos.ap-shanghai.myqcloud.com/cos_file/wechat_xcx/66ed20c42c88e_1726816452.png'
					},
					{
						id: '2',
						title: '我的小店',
						tip: '自己的小店信息',
						img: 'https://file-1314054542.cos.ap-shanghai.myqcloud.com/cos_file/wechat_xcx/66ed202b317c9_1726816299.png'
					},
					{
						id: '3',
						title: '联系客服',
						tip: '为您答疑解惑',
						img: 'https://file-1314054542.cos.ap-shanghai.myqcloud.com/cos_file/wechat_xcx/66ed20795848d_1726816377.png'
					},
					{
						id: '4',
						title: '上级联系方式',
						tip: '查看上级联系方式',
						img: '/static/my/new/icon-call-phone.png'
					},
					{
						id: '5',
						title: '个人信息',
						tip: '修改个人信息',
						img: '/static/my/new/icon-change-avatar.png'
					},
					// {
					// 	id: '4',
					// 	title: '商务合作',
					// 	tip: '查看商务合作',
					// 	img: 'https://file-1314054542.cos.ap-shanghai.myqcloud.com/cos_file/wechat_xcx/66837001d9744_1719889921.png'
					// },
					{
						id: '6',
						title: '设置',
						tip: '查看设置',
						img: 'https://file-1314054542.cos.ap-shanghai.myqcloud.com/cos_file/wechat_xcx/66ed1ffe9300f_1726816254.png'
					},
					{
						id: '10',
						title: '设备订单',
						tip: '查看设备订单',
						img: 'https://file-1314054542.cos.ap-shanghai.myqcloud.com/cos_file/wechat_xcx/66f269d8de29b_1727162840.png'
					},
					{
						id: '13',
						title: '宽带订单',
						tip: '宽带订单',
						img: 'https://file-1314054542.cos.ap-shanghai.myqcloud.com/cos_file/wechat_xcx/66f7a19e2eb98_1727504798.png'
					},
					{
						id: '7',
						title: '登出账号',
						tip: '登出当前账号',
						img: 'https://file-1314054542.cos.ap-shanghai.myqcloud.com/cos_file/wechat_xcx/66ed20e07f285_1726816480.png'
					}
				];
			} else if (this.userInfoObjNew.level == '2') {
				that.bottomList = [
					{
						id: '0',
						title: '我的分销',
						tip: '查看我的分销',
						img: 'https://file-1314054542.cos.ap-shanghai.myqcloud.com/cos_file/wechat_xcx/66ed20a6ee11c_1726816422.png'
					},
					{
						id: '1',
						title: '分销员招募',
						tip: '招募我的分销员',
						img: 'https://file-1314054542.cos.ap-shanghai.myqcloud.com/cos_file/wechat_xcx/66ed1fdf46ae6_1726816223.png'
					},
					{
						id: '11',
						title: '电商带货',
						tip: '我邀请的用户',
						img: 'https://file-1314054542.cos.ap-shanghai.myqcloud.com/cos_file/wechat_xcx/66ed20c42c88e_1726816452.png'
					},
					// {
					// 	id: '1',
					// 	title: '我的用户',
					// 	tip: '我邀请的用户',
					// 	img: '/static/my/img-my-user.png'
					// },
					{
						id: '2',
						title: '我的小店',
						tip: '自己的小店信息',
						img: 'https://file-1314054542.cos.ap-shanghai.myqcloud.com/cos_file/wechat_xcx/66ed202b317c9_1726816299.png'
					},
					{
						id: '3',
						title: '联系客服',
						tip: '为您答疑解惑',
						img: 'https://file-1314054542.cos.ap-shanghai.myqcloud.com/cos_file/wechat_xcx/66ed20795848d_1726816377.png'
					},
					{
						id: '4',
						title: '个人信息',
						tip: '修改个人信息',
						img: '/static/my/new/icon-change-avatar.png'
					},
					// {
					// 	id: '4',
					// 	title: '商务合作',
					// 	tip: '查看商务合作',
					// 	img: 'https://file-1314054542.cos.ap-shanghai.myqcloud.com/cos_file/wechat_xcx/66837001d9744_1719889921.png'
					// },
					{
						id: '5',
						title: '设置',
						tip: '查看设置',
						img: 'https://file-1314054542.cos.ap-shanghai.myqcloud.com/cos_file/wechat_xcx/66ed1ffe9300f_1726816254.png'
					},
					{
						id: '10',
						title: '设备订单',
						tip: '查看设备订单',
						img: 'https://file-1314054542.cos.ap-shanghai.myqcloud.com/cos_file/wechat_xcx/66f269d8de29b_1727162840.png'
					},
					{
						id: '13',
						title: '宽带订单',
						tip: '查看宽带订单',
						img: 'https://file-1314054542.cos.ap-shanghai.myqcloud.com/cos_file/wechat_xcx/66f7a19e2eb98_1727504798.png'
					},
					{
						id: '6',
						title: '登出账号',
						tip: '登出当前账号',
						img: 'https://file-1314054542.cos.ap-shanghai.myqcloud.com/cos_file/wechat_xcx/66ed20e07f285_1726816480.png'
					}
				];
			} else if (this.userInfoObjNew.level == '3') {
				that.bottomList = [
					{
						id: '11',
						title: '电商带货',
						tip: '我邀请的用户',
						img: 'https://file-1314054542.cos.ap-shanghai.myqcloud.com/cos_file/wechat_xcx/66ed20c42c88e_1726816452.png'
					},
					{
						id: '2',
						title: '我的小店',
						tip: '自己的小店信息',
						img: 'https://file-1314054542.cos.ap-shanghai.myqcloud.com/cos_file/wechat_xcx/66ed202b317c9_1726816299.png'
					},
					{
						id: '3',
						title: '联系客服',
						tip: '为您答疑解惑',
						img: 'https://file-1314054542.cos.ap-shanghai.myqcloud.com/cos_file/wechat_xcx/66ed20795848d_1726816377.png'
					},
					{
						id: '4',
						title: '设置',
						tip: '查看设置',
						img: 'https://file-1314054542.cos.ap-shanghai.myqcloud.com/cos_file/wechat_xcx/66ed1ffe9300f_1726816254.png'
					},
					{
						id: '10',
						title: '设备订单',
						tip: '查看设备订单',
						img: 'https://file-1314054542.cos.ap-shanghai.myqcloud.com/cos_file/wechat_xcx/66f269d8de29b_1727162840.png'
					},
					{
						id: '13',
						title: '宽带订单',
						tip: '查看宽带订单',
						img: 'https://file-1314054542.cos.ap-shanghai.myqcloud.com/cos_file/wechat_xcx/66f7a19e2eb98_1727504798.png'
					},
					{
						id: '5',
						title: '登出账号',
						tip: '登出当前账号',
						img: 'https://file-1314054542.cos.ap-shanghai.myqcloud.com/cos_file/wechat_xcx/66ed20e07f285_1726816480.png'
					}
				];
			} else {
				that.bottomList = [
					{
						id: '0',
						title: '我的分销',
						tip: '查看我的分销',
						img: 'https://file-1314054542.cos.ap-shanghai.myqcloud.com/cos_file/wechat_xcx/66ed20a6ee11c_1726816422.png'
					},
					{
						id: '1',
						title: '分销员招募',
						tip: '招募我的分销员',
						img: 'https://file-1314054542.cos.ap-shanghai.myqcloud.com/cos_file/wechat_xcx/66ed1fdf46ae6_1726816223.png'
					},
					{
						id: '11',
						title: '电商带货',
						tip: '申请电商带货',
						img: 'https://file-1314054542.cos.ap-shanghai.myqcloud.com/cos_file/wechat_xcx/66ed20c42c88e_1726816452.png'
					},
					{
						id: '2',
						title: '我的小店',
						tip: '自己的小店信息',
						img: 'https://file-1314054542.cos.ap-shanghai.myqcloud.com/cos_file/wechat_xcx/66ed202b317c9_1726816299.png'
					},
					{
						id: '3',
						title: '联系客服',
						tip: '为您答疑解惑',
						img: 'https://file-1314054542.cos.ap-shanghai.myqcloud.com/cos_file/wechat_xcx/66ed20795848d_1726816377.png'
					},
					// {
					// 	id: '4',
					// 	title: '上级联系方式',
					// 	tip: '查看上级联系方式',
					// 	img: '/static/my/new/icon-call-phone.png'
					// },
					// {
					// 	id: '5',
					// 	title: '个人信息',
					// 	tip: '修改个人信息',
					// 	img: '/static/my/new/icon-change-avatar.png'
					// },
					{
						id: '6',
						title: '设置',
						tip: '查看设置',
						img: 'https://file-1314054542.cos.ap-shanghai.myqcloud.com/cos_file/wechat_xcx/66ed1ffe9300f_1726816254.png'
					},
					{
						id: '10',
						title: '设备订单',
						tip: '查看设备订单',
						img: 'https://file-1314054542.cos.ap-shanghai.myqcloud.com/cos_file/wechat_xcx/66f269d8de29b_1727162840.png'
					},
					{
						id: '13',
						title: '宽带订单',
						tip: '查看宽带订单',
						img: 'https://file-1314054542.cos.ap-shanghai.myqcloud.com/cos_file/wechat_xcx/66f7a19e2eb98_1727504798.png'
					},
					{
						id: '7',
						title: '登出账号',
						tip: '登出当前账号',
						img: 'https://file-1314054542.cos.ap-shanghai.myqcloud.com/cos_file/wechat_xcx/66ed20e07f285_1726816480.png'
					}
				];
			}
		},

		// 保存
		handleShare(val) {
			if (val.name == '保存本地') {
				// 获取要保存的图片URL或者Base64数据
				let imageUrl = this.shareImg; // 或者 let base64Data = 'data:image/jpeg;base64,...'

				// 创建一个隐藏的<a>标签元素
				const linkElement = document.createElement('a');
				linkElement.href = imageUrl || `data:${mimeType};base64,${base64Data}`;
				linkElement.download = 'image.jpg'; // 设置文件名

				// 模拟点击事件触发下载
				document.body.appendChild(linkElement);
				linkElement.click();
				document.body.removeChild(linkElement);
			}
		},

		// 获取联系方式
		getAgenContact() {
			let agentId = uni.getStorageSync('userInfo').agent_id;
			let level = uni.getStorageSync('userInfo').level;
			this.$request('/api/getAgenContact', {}, 'GET').then((res) => {
				if (res.code == 1) {
					if (res.data.contact_number == null && res.data.contact_qrcode == null) {
						uni.showToast({
							title: '上级未配置联系方式',
							icon: 'none'
						});
						return;
					} else {
						this.userMsgObj = res.data;
						// 如果agent_id=91,则弹出提示
						if (level == 1 && agentId == 91) {
							uni.showToast({
								title: '请联系您的直属商务',
								icon: 'none',
								duration: 1800
							});
							return;
						} else {
							this.showPhoneNum = true;
						}
					}
				} else {
					uni.showToast({
						title: '获取联系方式失败',
						icon: 'none'
					});
					return;
				}
			});
		},

		// 登出接口
		loginOut() {
			this.$request(
				'/api/fxuserLoginOut',
				{
					id: uni.getStorageSync('userInfo').id
				},
				'POST'
			).then((res) => {
				if (res.code == 1) {
					uni.removeStorageSync('userInfo');
					uni.removeStorageSync('h5-token');
					setTimeout(() => {
						uni.navigateTo({
							url: '/pages/login/login'
						});
					}, 1200);
				} else {
					uni.showToast({
						title: res.msg ? res.msg : '网络出错，请重试',
						icon: 'none'
					});
					return;
				}
			});
		},

		// 联系客服接口
		getKfurl() {
			this.$request('/api/getAgentKefuInfo', {}, 'GET').then((res) => {
				if (res.code == 1) {
					if (res.data.kefu_type == 1) {
						uni.navigateTo({
							url: '/pages/index/webview/webview?url=' + res.data.kefu_url
						});
					} else if (res.data.kefu_type == 2) {
						this.customObj = res.data.kefu_image;
						this.showCustom = true;
					}
				} else {
					uni.showToast({
						title: '您没有合伙人客服',
						icon: 'none'
					});
					return;
				}
			});
		},

		// 选择我的分销等
		handlerBottom(val) {
			const that = this;
			if (val.title == '我的分销') {
				if (this.userIsAgentNew == 0) {
					// 分销员
					uni.navigateTo({
						url: '/pages/my/myDistribution/myDistribution'
					});
				} else {
					// 合伙人
					uni.navigateTo({
						url: '/pages/agentPortion/my/myDistribution/myDistribution'
					});
				}
			} else if (val.title == '分销员招募') {
				this.$emit('distributorsRecruit', 'distributorsRecruit');
			} else if (val.title == '我的小店') {
				this.$emit('myStore', 'myStore');
			} else if (val.title == '联系客服') {
				this.getKfurl();
			} else if (val.title == '商务合作') {
				uni.navigateTo({
					url: '/pages/my/cooperation/cooperation'
				});
			} else if (val.title == '上级联系方式') {
				this.getAgenContact();
			} else if (val.title == '个人信息') {
				if (this.userIsAgentNew == 0) {
					// 分销员
					uni.navigateTo({
						url: '/pages/my/personalData/personalData'
					});
				} else {
					uni.navigateTo({
						url: '/pages/agentPortion/my/personalData/personalData'
					});
				}
			} else if (val.title == '登出账号') {
				this.showOut = true;
			} else if (val.title == '设置') {
				uni.navigateTo({
					url: '/pages/my/setUpPage/setUpPage'
				});
			} else if (val.title == '电商带货') {
				uni.navigateTo({
					url: '/pages/my/liveManagement/liveManagement'
				});
			} else if (val.title == '设备订单') {
				uni.navigateTo({
					url: '/pages/wifiOrder/wifiOrder'
				});
			} else if ((val.title = '宽带订单')) {
				uni.navigateTo({
					url: '/pages/broadband/order/order'
				});
			}
		},

		// 确定登出
		sureLoginOut() {
			this.loginOut();
		}
	}
};
</script>

<style lang="scss" scoped>
.distribution_container {
	.distribution_title_box {
		position: relative;
		margin: 0 16rpx;

		.distribution_title_img {
			width: 100%;

			.distribution_img {
				width: 100%;
				height: 100%;
			}
		}

		.distribution_title {
			position: absolute;
			top: 50%;
			left: 38rpx;
			transform: translateY(-50%);
			font-family: all-font;
			font-weight: 500;
			font-size: 34rpx;
			color: #333333;
		}
	}

	.distribution_box {
		display: flex;
		flex-wrap: wrap;
		justify-content: space-between;
		background: #ffffff;
		box-shadow: 0px 12rpx 40rpx 17rpx rgba(172, 168, 168, 0.06);
		border-radius: 12rpx;
		border: 1px solid #f6f6f6;
		margin: 33rpx 18rpx;
		padding: 0 24rpx 24rpx;

		.bottom_box {
			display: flex;
			align-items: center;
			justify-content: space-between;
			width: 321rpx;
			background: #ffffff;
			box-shadow: 0px 4rpx 5rpx 0px rgba(210, 210, 210, 0.23);
			border-radius: 10rpx;
			border: 1px solid #f5f5f5;
			padding: 29rpx 19rpx 18rpx 26rpx;
			margin-bottom: 21rpx;

			.bottom_title_box {
				font-family: all-font;

				.bottom_title {
					font-size: 30rpx;
					font-weight: 500;
					color: #333;
					padding-bottom: 6rpx;
				}

				.bottom_btn {
					font-size: 22rpx;
					font-weight: 400;
					color: #999;
				}
			}

			.bottom_img_box {
				width: 74rpx;
				height: 74rpx;

				.bottom_img {
					width: 100%;
					height: 100%;
				}
			}
		}
	}

	.popup_distributor_box {
		width: 550rpx;
		height: 930rpx;

		.popup_distributor_img {
			width: 100%;
			height: 100%;
		}
	}

	.popup_custom_box {
		width: 100%;
	}

	.popup_phone_box {
		padding-bottom: 20rpx;

		.popup_wx_code {
			.popup_wx_img {
				width: 100%;
				height: 100%;
				object-fit: cover;
				-webkit-touch-callout: default;
			}
		}

		.popup_phone_num {
			font-size: 30rpx;
			padding: 0 60rpx 0 20rpx;
		}
	}

	.distributor_btn_box {
		padding: 15rpx 0;

		.distributor_btn_all {
			display: flex;
			flex-direction: column;
			align-items: center;
			justify-content: center;

			.btn_img_box {
				width: 82rpx;
				height: 82rpx;

				.btn_img {
					width: 100%;
					height: 100%;
				}
			}

			.btn_name {
				font-family: all-font;
				font-weight: 400;
				font-size: 30rpx;
				color: #333333;
			}
		}
	}
}
</style>
